<template>
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">钱包</block>
		</cu-custom>
		<view>
			<view class="recharge-list">
				<view v-for="(item, index) in rechargeList" :key="index" class="bg-white border-r mb20 p-all30">
					<view class="top flex">
						<view class="headingImg">
							<image :src="item.headingImg" mode="scaleToFill" />
						</view>
						<view class="flex1 ml20 userInfo">
							<view>
								<!-- <text class="f32">用户名称:</text> -->
								<text class="32">{{ item.nickName }}</text>
							</view>
							<view>
								<!-- <text>支付时间:</text> -->
								<text>{{ item.payTime }}</text>
							</view>
						</view>
					</view>
					<view class="mt40">
						<view class="f36">
							<text>支付金额:</text>
							<text class="ml10 text-red text-price">{{ item.paymentPrice }}</text>
						</view>

						<view class="f36 mt20">
							<text>剩余提现额度:</text>
							<text class="ml10 text-red text-price">{{ item.surplusMoney }}</text>
						</view>
						<view class="f36 mt20">
							<text>剩余提现次数:</text>
							<text class="ml10">{{ item.surplusRefundNum }}</text>
						</view>
						<view class="flex mt40 justify-between align-center">
							<view class="tips mt20 f26 text-gray">提示:单笔最多提现50次!</view>
							<button
								v-if="item.surplusRefundNum > 0"
								class="withdraw-btn border-r"
								:class="'bg-' + theme.backgroundColor"
								:disabled="false"
								hover-class="button-hover"
								@tap.stop="withdraw(item)"
							>
								<text style="color: #fff">提现</text>
							</button>
						</view>
					</view>
				</view>
				<view :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"></view>
			</view>
		</view>
	</view>
</template>
<script>
const app = getApp();
import util from 'utils/util';
import api from 'utils/api';
export default {
	data() {
		return {
			theme: app.globalData.theme,
			rechargeList: [],
			page: {
				current: 1,
				size: 10
			},
			loadmore: false
		};
	},
	// onLoad(options) {
	// 	this.rechargeList = [];
	// 	this.page.current = 1;
	// 	this.getRechargeList();
	// },
	onShow() {
		this.rechargeList = [];
		this.page.current = 1;
		this.getRechargeList();
	},
	//分页
	onReachBottom() {
		if (this.loadmore) {
			this.page.current += 1;
			this.getRechargeList();
		}
	},
	methods: {
		getRechargeList() {
			this.loadmore = true;
			let para = { ...this.page };
			api.getRechargeList(para).then((res) => {
				let data = res.data.records;
				this.rechargeList = [...this.rechargeList, ...data];
				if (data.length < this.page.size) {
					this.loadmore = false;
				}
			});
		},
		withdraw(item) {
			uni.showModal({
				title: '提示',
				content: '',
				showCancel: true,
				editable: true,
				placeholderText: '请输入提现金额',
				success: (e) => {
					if (e.confirm) {
						//非数字报错
						if (!e.content) {
							uni.showToast({
								title: '请输入提现金额',
								icon: 'none'
							});
							return;
						}
						let reg = /^[+-]?\d+(\.\d+)?$/;
						if (!reg.test(e.content)) {
							uni.showToast({
								title: '请输入最多两位小数的金额',
								icon: 'none'
							});
							this.payLoadling = false;
							return;
						}
						//小于0报错
						if (e.content <= 0) {
							uni.showToast({
								title: '请输入提现金额',
								icon: 'none'
							});
							return;
						}
						if (e.content > item.surplusMoney) {
							uni.showToast({
								title: '提现金额不能大于剩余提现额度',
								icon: 'none'
							});
							return;
						}
						let para = {
							refundPrice: e.content,
							userId: uni.getStorageSync('user_info').id,
							wxPayId: item.id
						};
						api.livewxrefund(para).then((res) => {
							uni.showToast({
								title: '提现成功',
								icon: 'none'
							});
							this.page.current = 1;
							this.rechargeList = [];
							this.getRechargeList();
						});
					}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.headingImg {
	width: 120rpx;
	height: 120rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.userInfo {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.recharge-list {
	padding: 20rpx;
}

.withdraw-btn {
	margin: 0;
}
</style>
